<template>
  <div class="main_bg">
    <section class="np_content">
      <mt-field label="姓名" placeholder="请输入姓名" v-model="patientInfo.patient_name"></mt-field>
      <mt-field label="性别" class="hideTsInput">
        <div class="choose_sex">
          <span class="choose_option" @click="chooseSex('m')">
            <!-- <i class="iconfont icon-dui" @click="chooseSex('m')" :class="{choosed: patientInfo.patient_sex == 'm'}"></i> -->
            <svg viewBox="0 0 1024 1024" width="20" height="20" fill="#ced4da"
              :class="{ choosed: patientInfo.patient_sex=='m'}"
            ><defs><style type="text/css"></style></defs><path d="M512 152c96.2 0 186.6 37.4 254.6 105.4S872 415.8 872 512s-37.4 186.6-105.4 254.6S608.2 872 512 872c-96.2 0-186.6-37.4-254.6-105.4S152 608.2 152 512s37.4-186.6 105.4-254.6S415.8 152 512 152m0-56C282.2 96 96 282.2 96 512s186.2 416 416 416 416-186.2 416-416S741.8 96 512 96z"></path><path d="M727 297C669.6 239.6 593.2 208 512 208c-81.2 0-157.6 31.6-215 89C239.6 354.4 208 430.8 208 512s31.6 157.6 89 215C354.4 784.4 430.8 816 512 816c81.2 0 157.6-31.6 215-89C784.4 669.6 816 593.2 816 512s-31.6-157.6-89-215z"></path></svg>
            <span>先生</span>
          </span>
          <span class="choose_option" @click="chooseSex('f')">
            <!-- <i class="iconfont icon-dui" @click="chooseSex('f')" :class="{choosed: patientInfo.patient_sex == 'f'}"></i> -->
            <svg viewBox="0 0 1024 1024" width="20" height="20" fill="#ced4da"
              :class="{ choosed: patientInfo.patient_sex=='f'}"
            ><defs><style type="text/css"></style></defs><path d="M512 152c96.2 0 186.6 37.4 254.6 105.4S872 415.8 872 512s-37.4 186.6-105.4 254.6S608.2 872 512 872c-96.2 0-186.6-37.4-254.6-105.4S152 608.2 152 512s37.4-186.6 105.4-254.6S415.8 152 512 152m0-56C282.2 96 96 282.2 96 512s186.2 416 416 416 416-186.2 416-416S741.8 96 512 96z"></path><path d="M727 297C669.6 239.6 593.2 208 512 208c-81.2 0-157.6 31.6-215 89C239.6 354.4 208 430.8 208 512s31.6 157.6 89 215C354.4 784.4 430.8 816 512 816c81.2 0 157.6-31.6 215-89C784.4 669.6 816 593.2 816 512s-31.6-157.6-89-215z"></path></svg>
            <span>女士</span>
          </span>
        </div>
      </mt-field>
      <!-- <mt-field label="出生日期" placeholder="请输入出生日期" type="date" v-model="patientInfo.PATIENT_CSRQ"></mt-field> -->
      <mt-field class="disabledInput" label="出生日期" placeholder="请输入出生日期" @click.native="openPicker(e)"
        v-model="patientcxrq"
      ></mt-field>
      <mt-field label="身份证号码" placeholder="请输入身份证号码" v-model="patientInfo.card_num"></mt-field>
      <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="patientInfo.patient_mobile"></mt-field>
      <mt-field label="医保类型">
        <div class="choose_sex">
          <span class="choose_option" @click="chooseType('gr')">
            <!-- <i class="iconfont icon-dui" @click="chooseType('gr')" :class="{choosed: patientInfo.payment_type_name == 'gr'}"></i>-->
            <svg viewBox="0 0 1024 1024" width="20" height="20" fill="#ced4da"
              :class="{ choosed: patientInfo.payment_type_name=='gr'}"
            ><defs><style type="text/css"></style></defs><path d="M512 152c96.2 0 186.6 37.4 254.6 105.4S872 415.8 872 512s-37.4 186.6-105.4 254.6S608.2 872 512 872c-96.2 0-186.6-37.4-254.6-105.4S152 608.2 152 512s37.4-186.6 105.4-254.6S415.8 152 512 152m0-56C282.2 96 96 282.2 96 512s186.2 416 416 416 416-186.2 416-416S741.8 96 512 96z"></path><path d="M727 297C669.6 239.6 593.2 208 512 208c-81.2 0-157.6 31.6-215 89C239.6 354.4 208 430.8 208 512s31.6 157.6 89 215C354.4 784.4 430.8 816 512 816c81.2 0 157.6-31.6 215-89C784.4 669.6 816 593.2 816 512s-31.6-157.6-89-215z"></path></svg>
            <span>无医保</span>
          </span>
          <span class="choose_option" @click="chooseType('yb')">
            <!-- <i class="iconfont icon-dui" @click="chooseType('yb')" :class="{choosed: patientInfo.payment_type_name == 'yb'}"></i> -->
            <svg viewBox="0 0 1024 1024" width="20" height="20" fill="#ced4da"
              :class="{ choosed: patientInfo.payment_type_name=='yb'}"
            ><defs><style type="text/css"></style></defs><path d="M512 152c96.2 0 186.6 37.4 254.6 105.4S872 415.8 872 512s-37.4 186.6-105.4 254.6S608.2 872 512 872c-96.2 0-186.6-37.4-254.6-105.4S152 608.2 152 512s37.4-186.6 105.4-254.6S415.8 152 512 152m0-56C282.2 96 96 282.2 96 512s186.2 416 416 416 416-186.2 416-416S741.8 96 512 96z"></path><path d="M727 297C669.6 239.6 593.2 208 512 208c-81.2 0-157.6 31.6-215 89C239.6 354.4 208 430.8 208 512s31.6 157.6 89 215C354.4 784.4 430.8 816 512 816c81.2 0 157.6-31.6 215-89C784.4 669.6 816 593.2 816 512s-31.6-157.6-89-215z"></path></svg>
            <span>有医保</span>
          </span>
        </div>
      </mt-field>
      <mt-field label="关系" placeholder="与该就诊人的关系" v-model="patientInfo.ralation"></mt-field>
      <span>
        <mt-button size="large" type="primary" @click="opeNewPatient">{{saveButton}}</mt-button>
      </span>
    </section>
    <mt-datetime-picker
      ref="picker"
      v-model="csrqTempValue"
      type="date"
      yearFormat="{value} 年"
      monthFormat="{value} 月"
      dateFormat="{value} 日"
      :startDate="startDate"
    >
    </mt-datetime-picker>
  </div>
</template>

<script>
import Vue from 'vue';
import vSelect from 'vue-select';
import { formatDate } from '../../plugins/date.js';

Vue.component('v-select', vSelect);

export default {
  data() {
    return {
      csrqTempValue: '', // 动态显示响应日期值
      startDate: new Date('1850/1/1'),
      pickerVisible: '', // 动态计算日期
      ts: this.newStore(),
      tq: this.getData(),
      reg: this.regular(),
      saveButton: '保存',
      type: 1, // 支付方式
      patientInfo: {
        patient_id: '',
        patient_name: '',
        patient_sex: 'm', // m男  f女
        patient_age: '',
        patient_csrq: '', // 出生日期
        patient_mobile: '',
        patient_blhm: '',
        source_value: '', // fjjm-附近居民/pyjs-朋友介绍/ggxc-广告宣传/wxtg-微信推广/wbtg-微博推广/wj-万家APP/pahys-平安好医生/other-其他
        pati_source: '', // fjjm-附近居民/pyjs-朋友介绍/ggxc-广告宣传/wxtg-微信推广/wbtg-微博推广/wj-万家APP/pahys-平安好医生/other-其他
        alle_check: '', // n-无过敏史 y-有过敏史
        allergy: '', // qms-青霉素/ajhqms-氨基苄青霉素/lms-链霉素/knms-卡那霉素/tb-头孢/haxc-磺胺噻唑/plky-普鲁卡因/cxha-长效磺胺/ffxnm-复方新诺明/aspl-阿司匹林/blf-布洛芬/bbbt-苯巴比妥/lbq-氯丙嗪/hamd-磺胺嘧啶
        pasth_check: '', // n-无既往史 y-有既往史
        past_history: '', // gxb-冠心病/tnb-糖尿病/jk-甲亢/sxs-输血史/gy-肝炎/zqgkzz-支气管扩张症/zqgxc-支气管哮喘/fjh-肺结核
        card_type: '', // jmsfz-居民身份证/hz-护照/jmhkb-居民户口簿/jgz-军官证/jsz-驾驶证/gajmtxz-港澳居民通行证/twjmtxz-台湾居民通行证/csz-出生证/szsjmjkk-深圳市居民健康卡/qtfdyxzj-其他法定有效证件
        card_num: '', // 身证号
        introducer_name: '', // 介绍人
        payment_type_name: 'gr', // yb-医保/gr-个人
        email: '',
        nation: '', // 民族
        nationality: '', // 国籍
        occupational: '', // 职业
        marriage: '', // 是否已婚 y-已婚  n-未婚
        entity: '', // 单位名称
        abo_blood_group: '', // ABO血型
        rh_blood_group: '', // RH血型
        living_address: '', // 住址
        patient_pic_url: '', // 患者头像路径
        medicare: '', // 医保
        medicare_value: '', // 医保值
        ralation: '', // 与就诊人的关系，父子，父女，母子，母女，外甥，等等
      },
      patientInfoCom: {},
      DATA: {},
      opeType: '',
      backPath: -1,
    };
  },
  components: {
  },
  beforeCreate() {
  },
  created() {
    /* 标题 */
    this.opeType = this.$route.query.TYPE;
    if (this.opeType == 'mod') {
      document.title = '修改就诊人信息';
      this.patientInfoCom = JSON.parse(`${this.$route.query.PATIENTINFO}`);
      console.log(`==================需要修改的就诊人信息:${JSON.stringify(this.patientInfo)}`);
      this.patientInfo.patient_id = this.patientInfoCom.PATIENT_ID;
      this.patientInfo.patient_age = this.patientInfoCom.PATIENT_AGE;
      this.patientInfo.patient_name = this.patientInfoCom.PATIENT_NAME;
      this.patientInfo.patient_csrq = `${this.patientInfoCom.PATIENT_CSRQ}`; // 出生日期
      this.patientInfo.patient_sex = this.patientInfoCom.PATSEX;
      this.patientInfo.card_num = this.patientInfoCom.CARD_NUM; // 身份证号
      this.patientInfo.patient_mobile = this.patientInfoCom.PATIENT_MOBILE;
      this.patientInfo.payment_type_name = this.patientInfoCom.PAYMENT_TYPE; // 有无医保
    } else {
      document.title = '添加就诊人';
    }

    this.backPath = this.$route.query.fromPath;
  },
  mounted() {
    if (sessionStorage.getItem('rybToken') == '' || sessionStorage.getItem('rybToken') == null) {
      this.$router.push('/login');
    }
  },
  computed: {
    patientcxrq() {
      if (this.csrqTempValue == '' || this.csrqTempValue == null || this.csrqTempValue == undefined || this.csrqTempValue == 'null') {
        return '';
      }
      const date = new Date(this.csrqTempValue);
      return formatDate(date, 'yyyy-MM-dd');
    },

  },
  watch: {
    // pickerVisible: (val) => {
    // this.patientInfo.PATIENT_CSRQ = formatDate(val, 'yyyy-MM-dd');
    // this.patientInfo.PATIENT_CSRQ = val;
    // console.log(`-------------------this.patientInfo.PATIENT_CSRQ = val:${val}`);
    // },

    /* 根据身份证号自动生成出生日期，性别
    autoCSRQ() {
      const identificationCardid = this.patientInfo.card_num; // 取得身份证号
      const year = identificationCardid.substring(6, 10);// 截取身份证上的年
      const month = identificationCardid.substring(10, 12);// 截取身份证上的月
      const day = identificationCardid.substring(12, 14);// 截取身份证上的日
      const chushengrq = `${year}-${month}-${day}`;// 转为2000-01-01的格式
      console.log(`自动生成的出生日期： ${chushengrq}`);
      $('#birthdayDate').val(chushengrq);
    },
    */

  },
  methods: {
    openPicker(e) {
      this.$refs.picker.open();
      e.blur();
      e.preventDefault(); // 阻止输入法的唤醒
    },
    chooseSex(sex) {
      this.patientInfo.patient_sex = sex;
    },
    chooseType(type) {
      this.patientInfo.payment_type_name = type;
    },
    // 保存新的病人信息
    opeNewPatient() {
      // 验证
      /*
      if (!this.reg.IsPersonId(this.patientInfo.card_num)) {
        this.showAlert = true;
        this.alertText = '请正确输入身份证号';
        return;
      }
      */
      if (!this.reg.IsMobile(this.patientInfo.patient_mobile)) {
        this.$messagebox('提示', '正确输入手机号');
        return;
      }

      /* 统一提交的数据JSON格式
      this.patientInfoCom.patient_id = this.patientInfo.PATIENT_ID;
      this.patientInfoCom.patient_name = this.patientInfo.PATIENT_NAME;
      this.patientInfoCom.patient_age = this.patientInfo.PATIENT_AGE;
      this.patientInfoCom.patient_sex = this.patientInfo.PATSEX;
      this.patientInfoCom.payment_type_name = this.patientInfo.PAYMENT_TYPE;
      this.patientInfoCom.patient_mobile = this.patientInfo.PATIENT_MOBILE;
      this.patientInfoCom.patient_blhm = this.patientInfo.PATIENT_BLHM;
      this.patientInfoCom.card_num = this.patientInfo.CARD_NUM; */
      this.patientInfo.patient_csrq = formatDate(new Date(this.csrqTempValue), 'yyyy-MM-dd');
      // this.patientInfo.patient_csrq = this.csrqTempValue;
      // 判断是否修改、新增
      if (this.opeType == 'add') {
        this.tq.saveNewPatient(this.patientInfo).then((ts) => {
          if (ts.d.RESULT == '200') {
            this.$messagebox('提示', '添加成功');
            // this.$router.back();
            this.$router.go(this.backPath);
          } else {
            this.$messagebox('提示', `添加失败: ${ts.d.RESULTTEXT}`);
          }
        });
      } else {
        this.tq.saveEditPatient(this.patientInfo).then((ts) => {
          if (ts.d.RESULT == '200') {
            this.$messagebox('提示', '修改成功');
            // this.$router.back();
            this.$router.go(this.backPath);
          } else {
            this.$messagebox('提示', `修改失败: ${ts.d.RESULTTEXT}`);
          }
        });
      }
      // }
    },
  },
  filters: {
  },
};
</script>

<style lang="stylus" scoped>
.hideTsInput
  .mint-field-core
    display none
.disabledInput
  .mint-cell-wrapper
    .mint-cell-value
      input
        readonly
.main_bg
  background-color #f8f9fa
.np_content
  margin-bottom 0rem
.mint-button--large
  margin 2rem auto 2rem auto
  width 90%
.choose_option
  align-self flex-start
  display flex
  flex-flow row || nowarp
  justify-content center
  align-items center
  height .8rem
  width 5rem
  i
    margin .5rem 0 0 0
.choose_sex {   /* 单选项 */
  display flex
  flex-flow row || nowarp
  justify-content flex-start
  align-items center
}
.choosed {
  fill: #1b6cbe;
}

</style>

